<template>
	<scroll-view @scrolltolower="scrolltolower" scroll-y class="container"
		:style="{height: 'calc(100vh - ' + containerOutsideHeight + 'px)'}">
		<view class="fill-record">
			<view class="search">
				<view class="search-input">
					<u-search @search="confirmSearch" @change="clearCondition" v-model="searchForm.keyWord"
						placeholder="请输入关键字" :showAction="false" :clearabled="false" height="88upx" />
				</view>
			</view>

			<view>
				<fill-record-item v-for="(item, index) in fillRecordArray" :key="index" :pageType="type" :data="item" @fnGetList="refreshDataList"></fill-record-item>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import fillRecordItem from "./fill-record-item.vue";
	import fileMixin from "@/mixins/file.js";
	import {
		getSystemHeightInfo
	} from "@/utils/common.js";
	import {
		handleFormatDate
	} from "@/utils/date.js";
	import {
		constructionPlan_list
	} from "@/api/engineeringMaintenance/engineeringMaintenance.js";

	export default {
		name: "fill-record",
		mixins: [fileMixin],
		components: {
			fillRecordItem
		},
		props: {
			// 当前页面的类型 - 0: 综合大修下的  1: 工程维保下的
			type: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				// 容器之外的高度
				containerOutsideHeight: 0,
				// 当前选择的筛选类型下标
				searchTypeIndex: 0,
				// 填报记录列表
				fillRecordArray: [],
				// 分页器
				paging: {
					pageNum: 1,
					pageSize: 20,
					total: 0,
				},
				// 是否正在加载中
				isLoading: false,
				// 搜索表单
				searchForm: {
					keyWord: "",
				},
			}
		},
		async created() {
			this.initContainerData();
			this.fillRecordArray = await this.getFillRecordArray();
		},
		methods: {
			/** 初始化容器数据 */
			initContainerData() {
				const {
					stateHeight,
					bottomHeight,
					navbarHeight
				} = getSystemHeightInfo();

				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight + 70;
			},
			async refreshDataList() {
				this.paging.pageNum = 1; 
				this.fillRecordArray = await this.getFillRecordArray();
			},
			/** 获取填报记录列表 */
			getFillRecordArray() {
				return new Promise(resolve => {
					const {
						pageNum,
						pageSize
					} = this.paging;
					let params = {};
					constructionPlan_list({
						currPage: pageNum,
						pageSize,
						projectId: null,
						params: {
							keyword: this.searchForm.keyWord,
							state:1
						},
					}).then(async res => {
						// console.log(res, '结果')
						const {
							list,
							total
						} = res.result;
						this.paging.total = total;
						// 处理并行获取文件列表数据...
						resolve(list);
					});
				});
			},

			/** 容器滚动到底部 */
			async scrolltolower() {
				// 判断是否有下一页
				if (!this.isLoading && this.paging.pageNum * this.paging.pageSize < this.paging.total) {
					// 加载...
					this.isLoading = true;
					this.paging.pageNum++;
					this.fillRecordArray = this.fillRecordArray.concat(await this.getFillRecordArray());
					this.isLoading = false;
				}
			},

			/** 确认搜索 */
			async confirmSearch() {
				this.paging.pageNum = 1;
				this.fillRecordArray = await this.getFillRecordArray();
			},
			async clearCondition(val) {
				if (!val) {
					this.paging.pageNum = 1;
					this.fillRecordArray = await this.getFillRecordArray();
				}
			},

			/** 改变搜索的类型 */
			changeSearchType(event) {
				this.searchTypeIndex = event.detail.value;
				this.confirmSearch();
			},
		}
	}
</script>

<style scoped lang="scss">
	.fill-record {
		.search {
			padding: 22upx 16upx 28upx;
			background: #fff;
			height: 88upx;
			position: sticky;
			top: -1px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 1;
			border-top: 1px solid #fff;

			.search-input {
				display: flex;
				align-items: center;
				height: 100%;
				margin-right: 12upx;
				flex: 1;
			}

			.condition {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #2f80ed;
				font-weight: bold;
				padding: 0 36upx;
				border: 1px solid #2f80ed;
				background: rgba(47, 128, 237, .1);
				height: 88upx;
				border-radius: 50upx;
			}
		}
	}
</style>